<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<title>Index</title>
<link href="/main/css/bootstrap.css" rel='stylesheet' type='text/css' />
<script src="/main/js/jquery.min.js"></script>
<link href="/main/css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<script type="text/javascript" src="/main/js/bootstrap.js"></script>

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'/>
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'/>
<script src="/main/js/responsiveslides.min.js"></script>
	<script>
		$(function () {
		  $("#slider").responsiveSlides({
			auto: true,
			nav: true,
			speed: 500,
			namespace: "callbacks",
			pager: true,
		  });
		});
	</script>
	<script type="text/javascript" src="/main/js/move-top.js"></script>
	<script src="/main/js/template-web.js"></script>
	<script type="text/javascript" src="/main/js/easing.js"></script>
<!--/script-->
<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){
					event.preventDefault();
					$('html,body').animate({scrollTop:$(this.hash).offset().top},900);
				});
			});
</script>
</head>
<body>
    <input type="hidden" th:value="${userName}" id="userName"/>
	<!-- header-section-starts-here -->
    <div th:include="/main/index :: navbar"></div>

	<!-- header-section-ends-here -->
	<div class="wrap">
		<ol class="breadcrumb">
			<li><a href="/main/index">主页</a></li>
			<li class="active">个人主页</li>
			<li class="active" id="breadName" th:text="${userName}"></li>
		</ol>
	</div>

	<!-- content-section-starts-here -->
	<div class="main-body">
		<div class="wrap">
			<div class="col-md-8 content-left">
				<!--content 开始-->


				<div class="articles" >
					<header>
						<h3 class="title-head">所有文章</h3>
					</header>
					<!--  开始-->

					<script type="text/html" id="post">
						<div class="article">
							<div class="article-right">
								<div class="article-title">
									<p>{{create_time}}</p>
									<a class="title" href="/main/paper/{{id}}" >{{title}} </a>
									<p >{{segment}}</p>
								</div>
							</div>
							<div class="article-left">
								<a href="/main/paper/{{id}}"><img src="{{paper_image}}" height="120px" width="180px"  alt="" /></a>
								<div class="clearfix"></div>
							</div>
							<div class="clearfix"></div>
						</div>
					</script>
					<div id="content"></div>
					<!--分页-->
					<script src="/main/js/jquery.twbsPagination.min.js"></script>
					<ul id="pagination-demo" class="pagination pagination-lg">
					</ul>
					<script type="text/javascript">
                        var url;
                        function init(url,list) {
                            var userName = document.getElementById("userName").value;
                            var search = window.location.search;
                            // alert(text)
                            $.ajax({
                                type: "post",
                                dataType: "json",
                                url: url,
                                timeout: 20000,
                                cache: false,
                                success: function (data) {
                                    var i;
                                    var j;
                                    // alert(data.size);
                                    for (i in data.list) {
                                        list = template('post', data.list[i]) + list;
                                    }
                                    document.getElementById('content').innerHTML = list;
                                    var pages =  Math.ceil(data.total/2);
                                    console.log(data);
                                    var visiablepage;
                                    if(pages >= 5 ){
                                        visiablepage = 5;
                                    }else{
                                        visiablepage = pages;
                                    }
                                    $('#pagination-demo').twbsPagination({
                                        totalPages: pages,
                                        visiblePages: visiablepage,
                                        first:"首页",
                                        prev:"上一页",
                                        next:"下一页",
                                        last:"尾页",
                                        onPageClick: function (event, page) {
                                            console.log(page);//page为当前页码
                                            $('#content').text('Page' + page);
                                                url = '/main/paper/personalPaperList/'+userName+'/'+page+search;
                                            // if(page!=data.pageNum){
                                                var  newList= ""
                                                init(url,newList);


                                        }
                                    });
                                }
                            })
                        }
                        $(document).ready(function () {
                            var userName = document.getElementById("userName").value;
                            url = '/main/paper/personalPaperList/'+userName+'/1';
                 			init(url);
                        })
					</script>

					<script>

					</script>
					<!-- 结束-->
				</div>
				<div class="clearfix"></div>

                <div class="sports-top">
                    <div class="s-grid-left">
                        <div class="cricket">
                            <header>
                                <h3 class="title-head">评论动态</h3>
                            </header>

                            <!--  开始-->
                            <script type="text/html" id="Pcomment">
                                <div class="s-grid-small">
                                    <div class="sc-image">
                                        <a href=""><img src="{{paper_image}}" alt="" /></a>
                                    </div>
                                    <div class="sc-text">
                                        <h5>{{title}}</h5>
                                        <b class="power">{{comments_user_name}} Ref: {{comments_content}}</b>
                                        <p class="date">{{comments_time}}</p>
                                        <a class="reu" href="/main/paper/{{paper_id}}">该文章更多新评<img src="images/more.png" alt="" /></a>
                                        <div class="clearfix"></div>
                                    </div>
                                    <div class="clearfix"></div>
                                </div>

                            </script>
                            <script type="text/javascript">
                                var Pcomment ='';
                                var userName = document.getElementById("userName").value;
                                $(document).ready(function () {
                                    var url = '/main/comments/PersonalComments?userName='+userName;
                                    $.ajax( {
                                        type : "post",
                                        dataType:"json",
                                        url : url,
                                        timeout : 20000,
                                        cache : false,
                                        success : function(data) {

                                            var i;
                                            var j;
                                            for(i in data.list){
                                                Pcomment = template('Pcomment', data.list[i])+Pcomment;
                                            }
                                            document.getElementById('PcommentsContent').innerHTML = Pcomment;
                                        }

                                    });
                                })
                            </script>
                            <div id="PcommentsContent"></div>
                            <!-- 结束-->
                        </div>
                    </div>

                    <div class="s-grid-right">
                        <div class="cricket">
                            <header>
                                <h3 class="title-popular">我的关注</h3>
                            </header>

                            <!--  开始-->
                            <script type="text/html" id="friend">
                                <div class="s-grid-small">
                                    <div class="sc-image">
<!--                                        <a href="/main/personal/{{login_name}}">-->
                                            <img src="{{head}}" height="80px" style="width: 80px" alt="" /></a>
                                    </div>
                                    <div class="sc-text">
                                        <h4>{{login_name}}</h4>
                                        <h5>邮箱:{{email}}</h5>
                                        <h5>&nbsp;</h5>
                                        {{if status == 0}}
                                        <h5>帐号以冻结</h5>
                                        {{/if}}
                                        <p class="date">创建时间:{{create_time}}</p>
                                        <a class="reu" href="/main/personal/{{login_name}}"><img src="images/more.png" alt="" /></a>
                                        <div class="clearfix"></div>
                                    </div>
                                    <div class="clearfix"></div>
                                </div>

                            </script>
                            <script type="text/javascript">
                                var fr ='';
                                $(document).ready(function () {
                                    var url = '/main/user/FriendsWithUserId?userName='+userName;
                                    $.ajax( {
                                        type : "post",
                                        dataType:"json",
                                        url : url,
                                        timeout : 20000,
                                        cache : false,
                                        success : function(data) {
                                            var i;
                                            var j;
                                            for(i in data.list){
                                                fr = template('friend', data.list[i])+fr;
                                            }
                                            document.getElementById('friendContent').innerHTML = fr;
                                        }

                                    });
                                })
                            </script>
                            <div id="friendContent"></div>
                            <!-- 结束-->
                        </div>
                    </div>
                    <!--</div>-->
                    <!--<div class="clearfix"></div>-->
                    <!--</div>-->
                </div>
                <div class="clearfix"></div>






                <!--content结束-->
            </div>

			<div class="col-md-4 side-bar">
			<div class="first_half">
				<div class="newsletter">
					<h1 class="side-title-head">基本信息</h1>
					<p class="sign">关于作者的基本信息</p>
                    <script type="text/html" id="ps">
                        <img id="img" src="{{head}}" th:width="80px" height="80px" />
                        <p>昵称: <a>{{login_name}}</a></p>
                        <p>邮箱: <a>{{email}}</a></p>
                        <p>性别: <a>{{sex}}</a></p>
                        帐号现在状态:
                        {{if status == 0}}
                        <a>帐号已被冻结</a>
                        {{/if}}
                        <a>正常状态</a>
                    </script>
					<script>
                        var ps ='';
                        $(document).ready(function () {
                            var userName = document.getElementById("userName").value;
                            url = '/main/user/personalMes';
                            $.ajax( {
                                type : "post",
                                dataType:"json",
                                data:{userName:userName},
                                url : url,
                                timeout : 20000,
                                cache : false,
                                success : function(data) {
                                    var i;
                                    ps = template('ps', data);
                                    document.getElementById('personalContent').innerHTML = ps;
                                }

                            });
                        })
					</script>
                    <div id="personalContent"></div>
				</div>
                <!--右侧 三重合label ajax数据显示 开始-->
                <div th:include="/main/index :: threeDoubleLabel"></div>
                <!--右侧 三重合label ajax数据显示 结束 在div class=first_half里面-->
				<div class="list_vertical">
		            <section class="accordation_menu"></section>
                </div>
			</div>
					 <div class="secound_half">
						 <!--标签栏 全部标签 限量20-->
						 <div th:include="/main/index :: tags"></div>
						 <!--标签栏结束-->

						 <!--popular-news 开始-->
						 <div th:include="/main/index :: popular-news"></div>
						 <!--popular-news 结束-->
					</div>
					<div class="clearfix"></div>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
	<!-- content-section-ends-here -->



	<!-- footer-section-starts-here -->
    <div th:include="/main/index :: footer-section"></div>
	<!-- footer-section-ends-here -->
	<script type="text/javascript">
		$(document).ready(function() {
				/*
				var defaults = {
				wrapID: 'toTop', // fading element id
				wrapHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear'
				};
				*/
		$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<a href="#to-top" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
<!----></div>
</body>
</html>
